@charset "utf-8";
$isNeedPublish: true !default;
$ppt: $red !default;
//鑳屾櫙灞傞鑹�
$pptIndex: 1 1000 !default;
@if ($isNeedPublish){
  html, body {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .drag{
    -webkit-transition:none;
    transition:none;
  }
  .abs, .mod_ppt_btn {
    position: absolute;
  }
  .mod_ppt_btn {
    @include animation-duration(1.5s);
    @include animation-iteration-count(infinite);
  }
  .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
  .mod_warpper{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0px, 0px);
    -webkit-backface-visibility: hidden;
    -moz-transform: translate3d(0px, 0px, 0px);
    -moz-backface-visibility: hidden;
    transform: translate3d(0px, 0px, 0px);
    backface-visibility: hidden;
  }
  .mod_containor{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:1;
    @include backface-visibility(hidden);
    //@include transition(all 0.2s linear);
  }
  /**--------------绠ご鏈濅笂鍔ㄧ敾-----------*/
  @-moz-keyframes startup {
    0%, 30% {
      opacity: 0;
      -moz-transform: translate(0, 10px);
    }
    60% {
      opacity: 1;
      -moz-transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      -moz-transform: translate(0, -5px);
    }
  }
  @-webkit-keyframes startup {
    0%, 30% {
      opacity: 0;
      -webkit-transform: translate(0, 10px);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate(0, -5px);
    }
  }
  @keyframes startup {
    0%, 30% {
      opacity: 0;
      transform: translate(0, 10px);
    }
    60% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate(0, -5px);
    }
  }
  /**--------------绠ご鏈濅笅鍔ㄧ敾-----------*/
  @-webkit-keyframes startdown {
    0%, 30% {
      opacity: 0;
      -webkit-transform: translate(0, -10px);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate(0, 5px);
    }
  }
  @-moz-keyframes startdown {
    0%, 30% {
      opacity: 0;
      -moz-transform: translate(0, -10px);
    }
    60% {
      opacity: 1;
      -moz-transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      -moz-transform: translate(0, 5px);
    }
  }
  @keyframes startdown {
    0%, 30% {
      opacity: 0;
      transform: translate(0, -10px);
    }
    60% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate(0, 5px);
    }
  }

  /*----------蹇冭烦鍔ㄧ敾----------*/
  @keyframes anim-heart {
    0% {
      opacity: 0.8;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.5);
    }
  }
  @-webkit-keyframes anim-heart {
    0% {
      opacity: 0.8;
      -webkit-transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.5);
    }
  }
  @-moz-keyframes anim-heart {
    0% {
      opacity: 0.8;
      -moz-transform: scale(1);
    }
    100% {
      opacity: 0;
      -moz-transform: scale(1.5);
    }
  }
  /*------------small heart-----------------*/
   @keyframes small-anim-heart {
    0% {
      opacity: 0.8;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }
  @-webkit-keyframes small-anim-heart {
    0% {
      opacity: 0.8;
      -webkit-transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.2);
    }
  }
  @-moz-keyframes small-anim-heart {
    0% {
      opacity: 0.8;
      -moz-transform: scale(1);
    }
    100% {
      opacity: 0;
      -moz-transform: scale(1.2);
    }
  }
  /*----------蹇冭烦鍔ㄧ敾----------*/


  @include keyframes(anim_up) {
    0% {
      top: 0px;
    }
    50% {
      top: 20px;
    }
    100% {
      top: 0px;
    }
  }
  @include keyframes(anim_down) {
    0% {
      bottom: 20px;
    }
    50% {
      bottom: 10px;
    }
    100% {
      bottom: 20px;
    }
  }

  /*鏃嬭浆涓�崐鍔ㄧ敾*/
  @keyframes rotateHalf {
    0% {
      transform:translate(-300%,80%) rotate(90deg);
      opacity: 0;
    }
    100% {
      transform:translate(0,0) rotate(0deg);
      opacity: 1;
    }
  }
  @-moz-keyframes rotateHalf{
    0% {
      -moz-transform:translate(-300%,80%) rotate(90deg);
      opacity: 0;
    }
    100% {
      -moz-transform:translate(0,0) rotate(0deg);
      opacity: 1;
    }
  }
  @-webkit-keyframes rotateHalf{
    0% {
      -webkit-transform:translate(-300%,80%) rotate(90deg);
      opacity: 0;
    }
    100% {
      -webkit-transform:translate(0,0) rotate(0deg);
      opacity: 1;
    }
  }
  
  @include keyframes(slideFull){
      0% {
       width:40px;
     }
    100% {
      width:146px;
    }
  }


  .full_abs {
    position: absolute;
    width: 100%;
  }
  .full_abc_middle {
    text-align: center;
    @extend .full_abs;
  }

  body .modal {
    bottom: auto;
  }
  .anim-in{
    display: none;
  }

  .anim-heart-parent{
    position: relative;
     .anim-in{
      display: block;
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #fff;
      z-index:1;
      position: absolute;
      left:0;
      top:0;
      @include border-radius(100%);
      .zfirst{
        z-index: 100;
      }
    }
  }

  /*淇敼*/
  .mod_page {
    width: 100%;
    height: 100%;
    background-image: url();
    background-image: -moz-radial-gradient(center center, circle, #eb0028 0%, #d40125 100%);
    background-image: -o-radial-gradient(center center, 100px 100px, #eb0028 0%, #d40125 100%);
    background-image: -webkit-radial-gradient(center center, 100px 100px, #eb0028 0%, #d40125 100%);
    background-image: radial-gradient(center center, 100px 100px, #eb0028 0%, #d40125 100%);
    color: #fff;
    z-index: nth($pptIndex, 1);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
    
  }
  /*button group*/
  .mod_ppt_btn {
    z-index: nth($pptIndex, 2);
    font-size: 24px;
    line-height: 24px;
    color: #fff;
    position: absolute;
    @include no_td;
    top: auto;
    &.down {
      left: 50%;
      top: 0;
      margin-left: -10px;
      @include animation-name(startdown);
    }
    &.up {
      left: 50%;
      top: auto;
      bottom: 0;
      margin-left: -10px;
      color: #fff;
      // @include transition(all 0.5s ease-in);
      @include animation-name(startup);
      .icon-up {
        color: #fff;
        @include no_td;
      }
    }
    &.firstup {
      margin-bottom: -12px;
      bottom: 20px;
      .in {
        display: block;
        margin-top: -12px;
      }
    }
    .in {
      font-size: 12px;
      line-height: 24px;
      margin-left: -25%;
      display: none;
    }
    &:hover {
      color: #fff;
    }
  }
  //鎺у埗鍥涘ぇ鍖哄煙鍔ㄧ敾
   .page1_show{
      .one_logo{
        @include animation-name(slideFull);
         @extend .animated;
        @include animation-duration(1.5s);
      }
      .maintitle{
        @include animation-name(fadeInDown);
        @extend .animated;
      }
     .subtitle{
       @include animation-name(fadeInDown);
       @extend .animated;
     }
   }
  .page2_show{
    .minus_title{
      @include animation-name(fadeInDown);
      @extend .animated;
    }
    .mod_countbar{
      @include animation-name(flipInX);
      @extend .animated;
    }
  }
  .page3_show{
    .mod_menu_group{
      @include animation(rotateHalf 1.5s 1 linear);
      @include translate(0,0);
      .anim-heart-parent{
          .anim-in{
            display:block;
            @include animation(small-anim-heart 1.7s 1 ease-in-out);
          }
          .circle-mask{
           display:block;
          }
      }
     li{
        -webkit-transform:translate(0,0) !important;
        transform:translate(0,0) !important;
      }
    }
  }
/*  .page4_show{
    .pagetitle{
      @include animation-name(slideInLeft);
      @extend .animated;
    }
    .subtitle{
      @include animation-name(slideInRight);
      @extend .animated;
    }
  }*/
  
  .mod_loading{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    color:#fff;
    position:absolute;
    left:0;
    top:0;
    font-size:2rem;
    text-align:center;
    padding-top:55%;
    z-index:2000;
    overflow:hidden;
  }
}
